<template>
	<view class="setCentre">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>设置</custom-navi>
		<view class="setCentre-list" v-for="(item,index) in setList" :key="index" @tap="operateBtn(item)">
			<view class="title">{{item.title}}</view>
			<view class="txt">
				<view class="txt-data">{{item.txt}}</view>
				<view class="txt-icon"><image src="/static/ic/rightHui.png" mode=""></image></view>
			</view>
		</view>
		<view class="setCentre-operation">
			<view class="switchover" @tap="switchoverBtn">切换账号</view>
			<view class="quit" @tap="quitBtn">退出登录</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="modal">
				<view class="modal-title">是否确认退出登录？</view>
				<view class="modal-btn">
					<view class="cancel" @tap="cancelBtn">取消</view>
					<view class="affirm" @tap="affirmBtn">确认退出</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	export default{
		components: { uniPopup },
		data(){
			return{
				setList:[
					{title:'登录账号',txt:'15908800770',url:''},
					{title:'修改密码',txt:'',url:'changePwd/index'},
					{title:'换绑手机',txt:'137****8888',url:'bound/index'}
				],
				shopInfo:''
			}
		},
		onLoad() {
			const _self = this
			uni.getStorage({
			  key: 'shopInfo',
			  success: function (res) {
			    _self.shopInfo = res.data
				_self.setList[2].txt = res.data.phone
			  }
			});
			this.phoneFormat()
		},
		methods:{
			phoneFormat (){
			  var tel = this.shopInfo.phone
			  tel = "" + tel;
			  var tel1 = tel.replace(tel.substring(3, 7), "****")
			  this.setList[2].txt=tel1
			  return tel1
			},
			operateBtn(item){
				// this.$utils.common.navigateTo(item.url)
				uni.navigateTo({
					url:item.url
				})
			},
			switchoverBtn(){ // 切换身份
				this.$utils.common.reLaunch('src/pages/ports/index')
			},
			quitBtn(){ // 退出登录按钮
			this.$refs.popup.open()
				// this.$utils.common.reLaunch('src/pages/login/index')
				// uni.clearStorage();
			},
			cancelBtn(){ // 取消
				this.$refs.popup.close();
			},
			affirmBtn(){ // 确定
				this.$utils.common.reLaunch('src/pages/login/index')
				uni.clearStorage();
			}
		}
	}
</script>

<style lang="scss">
	.setCentre{
		height: 100vh;
		background-color: rgba(243, 244, 248, 1);
		.modal{
			width:540rpx;
			height:310rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:20rpx;
			&-title{
				width: 100%;
				height: 220rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:220rpx;
				color:rgba(3,3,3,1);
				text-align: center;
				opacity:1;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
			}
			&-btn{
				display: flex;
				align-items: center;
				height: 88rpx;
				// justify-content: center;
				// justify-items: center;
				text-align: center;
				
				.cancel{
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					border-right: 2rpx solid rgba(235, 235, 235, 1);
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(149,151,166,1);
					opacity:1;
				}
				.affirm{
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(0,144,250,1);
					opacity:1;
				}
			}
			// &-btn:nth-child(1){
			// 	border-right: 2rpx solid rgba(235, 235, 235, 1);
			// }
		}
		&-operation{
			width:686rpx;
			position: absolute;
			bottom:100rpx;
			left: 32rpx;
			.switchover{
				width:686rpx;
				height:80rpx;
				background:rgba(255,255,255,1);
				opacity:1;
				border-radius:10rpx;
				font-size:34rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:80rpx;
				color:rgba(76,76,76,1);
				opacity:1;
				text-align: center;
			}
			.quit{
				width:686rpx;
				height:80rpx;
				background:rgba(0,144,250,1);
				opacity:1;
				border-radius:10rpx;
				margin-top: 20rpx;
				font-size:34rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:80rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				text-align: center;
			}
		}
		&-list{
			padding: 20rpx 30rpx;
			border-bottom: 2rpx solid rgba(217, 217, 217, 1);
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			.title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(80,80,80,1);
				opacity:1;
			}
			.txt{
				margin-left: auto;
				display: flex;
				align-items: center;
				&-data{
					
				}
				&-icon{
					width: 30rpx;
					height: 30rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&-list:nth-child(4){
			border-bottom: none;
			// display: none;
		}
	}
</style>
